<.focus_box>
  <:title>
    <%= if @from_setup do %>
      Setup Two-Factor Authentication
    <% else %>
      Your New Recovery Codes
    <% end %>
  </:title>

  <:subtitle>
    Use these recovery codes to log in if you lose access to the authenticator application. Store them somewhere safe!
  </:subtitle>

  <div
    id="recovery-codes-list"
    class="font-mono border-2 border-dotted border-gray-200 dark:border-gray-700 rounded-md text-gray-600 dark:text-gray-200 text-lg bg-gray-100 dark:bg-gray-900 p-2 mt-6 flex flex-wrap"
  >
    <%= for code <- @recovery_codes do %>
      <div class="basis-1/2 text-center">{code}</div>
    <% end %>
  </div>

  <div class="mt-6">
    <button onclick="print(); event.stopPropagation();" id="print" class="button w-full">
      Print Codes <Heroicons.printer class="h-4 w-4 ml-2 mt-1" />
    </button>
    <button
      onclick="var list = document.getElementById('recovery-codes-list'); var selection = getSelection(); selection.removeAllRanges(); var range = createRange(); range.selectNodeContents(list); selection.addRange(range); document.execCommand('copy'); selection.removeAllRanges(); event.stopPropagation(); document.getElementById('copy-base-icon').classList.add('hidden'); document.getElementById('copy-done-icon').classList.remove('hidden'); setTimeout(function() { document.getElementById('copy-done-icon').classList.add('hidden'); document.getElementById('copy-base-icon').classList.remove('hidden'); }, 2000)"
      id="copy"
      class="button w-full mt-4"
    >
      Copy to Clipboard
      <span id="copy-base-icon">
        <Heroicons.document_duplicate class="h-4 w-4 ml-2 mt-1" />
      </span>
      <span id="copy-done-icon" class="hidden">
        <Heroicons.check class="h-4 w-4 ml-2 mt-1" />
      </span>
    </button>
    <button
      id="finish"
      class="button w-full mt-4"
      onclick={"location.replace('#{Routes.settings_path(@conn, :security) <> "#update-2fa"}')"}
    >
      Finish
    </button>
  </div>
</.focus_box>
